<template>
    <div class="child-component">
        <p class="text">{{ text }}</p>
        <p class="more">{{ more }}</p>
    </div>
</template>

<script setup lang="ts">
import { defineProps } from "vue";

const props = defineProps({
    text: {
        type: String,
        required: true,
        default: "",
    },
    more: {
        type: String,
        default: "",
    },

});
</script>

<style scoped lang="less">
@import '@/assets/common/font.css';

.child-component {
    position: relative;
    height: 25px;
    background-image: url(@/assets/components/1.png);
    background-repeat: no-repeat;
    background-size: contain;

    .text {
        position: absolute;
        top: 0px;
        left: 51px;
        font-size: 16px;
        font-family: YSBT;
        color: #fff;
        letter-spacing: 1.4px;
    }

    .more {
        position: absolute;
        top: 5px;
        left: 132px;
        font-size: 8px;
        font-family: YSBT;
        color: #ffffff;
        letter-spacing: 1px;
    }
}
</style>